<template>
  <div>
    <el-card shadow="hover">
      <div class="title">订单数量</div>
      <div ref="orderNumber" class="h-[350px]"></div>
    </el-card>
  </div>
</template>

<script setup>
import * as echarts from 'echarts';
const orderNumber = ref();
const props = defineProps({
  sesstingList: {
    type: Array,
    default: () => []
  },
  dateList: {
    type: Array,
    default: () => []
  }
});

const delatTime = ref(true);
watch(
  () => props.sesstingList,
  () => {
    if (delatTime.value) {
      delatTime.value = false;
      initOrderNumber();
      setTimeout(() => {
        delatTime.value = true;
      }, 1000);
    }
  },
  { deep: true }
);

watch(
  () => props.dateList,
  () => {
    if (delatTime.value) {
      delatTime.value = false;
      initOrderNumber();
      setTimeout(() => {
        delatTime.value = true;
      }, 1000);
    }
  },
  { deep: true }
);
let myChart = ref(null);
const initOrderNumber = () => {
  myChart.value = echarts.init(orderNumber.value);
  let legends = props.sesstingList.map((item) => item.title);
  let seriesData = props.sesstingList.map((item) => {
    item.name = item.title;
    item.type = 'line';
    item.smooth = true;
    item.data = [
      parseInt(Math.random() * 100),
      parseInt(Math.random() * 100),
      parseInt(Math.random() * 100),
      parseInt(Math.random() * 100),
      parseInt(Math.random() * 100),
      parseInt(Math.random() * 100),
      parseInt(Math.random() * 100)
    ];
    return item;
  });
  let option = {
    xAxis: {
      type: 'category',
      data: props.dateList,
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value'
    },
    grid: {
      left: 20,
      right: 40,
      bottom: 20,
      top: 30,
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      },
      padding: [5, 10]
    },
    yAxis: {
      axisTick: {
        show: false
      }
    },
    legend: {
      data: legends
    },
    series: seriesData
  };
  option && myChart?.value.setOption(option);
};

onMounted(() => {
  initOrderNumber();
});
</script>

<style lang="scss" scoped></style>
